<template>
    <div class="PersonForm">
      <h1>Person Form</h1>
      姓：<input type="text" v-model="firstName" placeholder="请输入姓" />
      <br />
      名：<input type="text" v-model="lastName" placeholder="请输入名" />
      <br />
      全名：<span>{{ fullName }}</span>
      <br />
      <button @click="GetFullname">提交</button>
    </div>
</template>
  

<script setup lang="ts" name="PersonForm">
    import { ref, computed } from 'vue'

    let firstName = ref('zhang')
    let lastName = ref('san')

    function GetFullname() :string{
        return firstName.value + lastName.value
    }
    // 监听的内容变了 这里的值也会改变 
    let fullName = computed(() => {

        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    })


</script>


<style scoped>
.PersonForm {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}

span:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}

input:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}
</style>
